<template>
	<div class="mask" v-show="props.show" @click="emit('onClose')">
		<div class="c_container">
			<div class="contact">
				<div class="close" @click="emit('onClose')">
					<image src = "/static/my/close.png" class="close-img"  />
				</div>
				<span style="font-weight: 500;font-size: 40rpx;color: #252E3D;">官方客服微信</span>
				<image src="https://data.vipxb.cn/mini/yc/20240710001.png" class="qrcode"/>
				<span style="margin-top: 12rpx; font-weight: 400;font-size: 28rpx;color: #515864;">扫码添加官方客服微信</span>
				<div class="button" @tap = "copy">
					复制微信号
				</div>
			</div>
		</div>
	</div>
</template>

<script setup>
	import {ref, onMounted} from 'vue';
	const props = defineProps({
		show:{
			type: Boolean,
			default: false
		}
	})
	const emit = defineEmits(['onClose'])
	const copy = () => {
		uni.setClipboardData({
			data: 'wx_kf_zj',
			success: function () {
				uni.showToast({
					title: '复制成功',
					icon: 'none'
				})
			}
		})
	}
</script>

<style lang="scss">
.c_container{
	width: 100%;
	height: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	background: unset;
	.contact{
		width: calc(100% - 96px);
		height: 588rpx;
		background: #fff;
		display: flex;
		flex-direction: column;
		align-items: center;
		border-radius: 40rpx;
		padding-top: 40rpx;
		position: relative;
		.qrcode{
			width: 430rpx;
			height: 430rpx;
			margin-top: 20rpx;
		}
		.button{
			margin-top: 20rpx;
			background: linear-gradient( 315deg, #68edc5 0%, #51b7ff 100%);
			padding: 20rpx 110rpx;
			color: #fff;
			border-radius: 40rpx;
			visibility: hidden;
		}
		.close{
			position: absolute;
			top: 24rpx;
			right: 36rpx;
			width: 64rpx;
			height: 64rpx;
			border-radius: 32rpx;
			background: #F5F8FA;
			display: flex;
			justify-content: center;
			align-items: center;
			.close-img{
				width: 40rpx;
				height: 40rpx;
			}
		}
	}
}
</style>